* {
    margin: 0;
    padding: 0;
    outline: none;
    /* 边框和内边距包含在总宽高内 */
    box-sizing: border-box;
}

body {
    /* 弹性布局水平居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* body最小高度为100%窗口高度 */
    min-height: 100vh;
    background: linear-gradient(200deg, #0c3483, #a2b6df);
}

.wrapper {
    width: 450px;
    background-color: #fff;
    /* 内边距（上下左右） */
    padding: 40px;
    /* 盒子阴影 */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.wrapper .input-data {
    /* 相对定位 */
    position: relative;
    width: 100%;
    height: 40px;
    margin-bottom: 25px;
}

.wrapper .input-data input {
    width: 100%;
    height: 100%;
    border: none;
    font-size: 17px;
    border-bottom: 2px solid #c0c0c0;
}

.wrapper .input-data input:focus~label,
.wrapper .input-data input:valid~label {
    /* 输入框获得焦点时,输入值合法时 */
    transform: translateY(-25px);
    font-size: 15px;
    color: #2c6fdb;
}

.wrapper .input-data label {
    /* 绝对定位 */
    position: absolute;
    bottom: 10px;
    left: 0px;
    color: #808000;
    pointer-events: none;
    /* 动画过渡显得不生硬 */
    transition: all 0.3s ease;
}

.wrapper .input-data .underline {
    position: absolute;
    bottom: 0px;
    height: 2px;
    width: 100%;
    background-color: #2c6fdb;
    transform: scaleX(0);
    /* 延X轴缩小 */
    transition: all 0.3s ease;
    /* 加过度 */
}

.wrapper .input-data input:focus~.underline,
.wrapper .input-data input:valid~.underline {
    transform: scaleX(1);
    /* 延X放大 */
}